<template>
  <div class="wrapp">
    <home-header title="图片管理"></home-header>
    <label class="alert alert-success">我的照片</label>
    <div id="app">
      <el-upload
        action="http://localhost:3000/picture/"
        list-type="picture-card"
        trigger = "dsadsa"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <home-footer></home-footer>
  </div>
</template>

<script>
import HomeHeader from '.././Home/components/Header'
import HomeFooter from '.././Home/components/Footer'
export default {
  name: 'Picture',
  components: {
    HomeHeader,
    HomeFooter
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
  #app{
    padding-left: 35px;
  }
  .alert{
    width: 100%;
    text-align: center;
  }
  .wrapp{
    width: 100%;
  }
</style>
